<script setup lang="ts">
defineOptions({
  name: "gasBoardSPCStatis"
});

import { ref, onMounted, provide, computed } from "vue";
import { useRouter } from "vue-router";
import modelBox from "@/views/common/components/modelBox/index.vue";
import { PxCarousel } from "px-ui";
import { ArrowLeft, ArrowRight, Position } from "@px-ui/icons-vue";
import gasBoardLineItem from "./gasBoardLineItem.vue";
import { spcqueryList, spcquerySpcAnalysis } from "@/api/spc";
import { formatSPCPointsData } from "./hooks";
import dayjs from "dayjs";

const router = useRouter();

interface Props {
  dark?: boolean;
  height?: number;
}

const props = withDefaults(defineProps<Props>(), { dark: false, height: null });

const loadingBackground = computed(() => (props.dark ? "rgba(0, 30, 59, 0.8)" : undefined));

const carouselRef = ref<InstanceType<typeof PxCarousel> | null>(null);
const carouselIndex = ref<number>(1);
// 图表滚动时间间隔
const carouselInterval = 15000;
const loading = ref<boolean>(false);
const outSideList = ref<Array<any>>([]);

const togglePage = (num: number) => {
  if (num > 0) {
    carouselRef.value?.next();
  } else {
    carouselRef.value?.prev();
  }
};

const carouselChangeHandler = (index: number) => {
  carouselIndex.value = index + 1;
};

const toPage = ($e: any, jobId?: string) => {
  const path = "/gas/spc/spcsarch";
  const startTime = dayjs().subtract(1, "day").format("YYYY-MM-DD HH:mm:ss");
  const endTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
  const query = { startTime, endTime };
  if (jobId) {
    query["jobId"] = jobId;
  }
  router.push({ path, query });
};

const emitSpcItemEvent = (params: any) => {
  // console.log("params   ", params);
};

provide("emitSpcItemEvent", emitSpcItemEvent);

const init = async () => {
  loading.value = true;
  // const startTime = dayjs().subtract(7, "day").startOf("day").format("YYYY-MM-DD HH:mm:ss");
  // const endTime = dayjs().subtract(1, "day").endOf("day").format("YYYY-MM-DD HH:mm:ss");
  // const startTime = dayjs().subtract(1, "day").format("YYYY-MM-DD HH:mm:ss");
  // const endTime = dayjs().format("YYYY-MM-DD HH:mm:ss");

  const startTime = dayjs().subtract(4, "hour").format("YYYY-MM-DD HH:mm:ss");
  const endTime = dayjs().format("YYYY-MM-DD HH:mm:ss");

  const indicatorLevel = "Key-key";
  const params = {
    startTime,
    endTime,
    indicatorLevel,
    classCode: "GAS",
    indicatorName: "",
    pageNum: 1,
    pageSize: 999,
    point: "",
    querySpcCount: false,
    systemCode: []
  };
  const pointsList = await spcqueryList(params, () => {
    loading.value = false;
  });
  const jobIdList = pointsList?.data?.map(item => item.jobId);
  if (!jobIdList?.length) {
    loading.value = false;
    return;
  }
  const timePeriod = "minutes";
  const params2 = {
    startTime,
    endTime,
    jobIdList,
    timePeriod
  };
  const res = await spcquerySpcAnalysis(params2, () => {
    loading.value = false;
  });
  outSideList.value = formatSPCPointsData(res, true);
  loading.value = false;
};

onMounted(async () => {
  await init();
});
</script>

<template>
  <modelBox title="SPC" :borderRadius="false" :dark="dark">
    <template v-if="!dark" #title>
      <div class="toggle">
        <px-tooltip v-if="!dark" effect="dark" content="跳转至SPC页面">
          <px-button type="primary" plain text :icon="Position" :disabled="loading" @click="toPage" />
        </px-tooltip>
        <px-tooltip effect="dark" content="上一页">
          <px-button type="primary" plain text :icon="ArrowLeft" :disabled="loading" @click="togglePage(-1)" />
        </px-tooltip>
        <div :class="['carousel-index', dark ? 'carousel-index-dark' : '']">{{ `${carouselIndex} / ${outSideList.length || "1"}` }}</div>
        <px-tooltip effect="dark" content="下一页">
          <px-button type="primary" plain text :icon="ArrowRight" :disabled="loading" @click="togglePage(1)" />
        </px-tooltip>
      </div>
    </template>
    <div v-loading="loading" :element-loading-background="loadingBackground" class="gas-board-bulkGas-statis">
      <px-carousel
        v-if="outSideList?.length"
        ref="carouselRef"
        :height="height ? `${height}px` : '162px'"
        :indicator-position="`${dark ? 'outside' : 'none'}`"
        arrow="never"
        :interval="carouselInterval"
        @change="carouselChangeHandler"
      >
        <px-carousel-item v-for="item in outSideList" :key="item.id">
          <div class="statis-carousel-item">
            <div v-for="ite in item.inSideList" :key="ite.name" class="statis-carousel-item-item" @click="toPage($event, ite.jobId)">
              <gasBoardLineItem :data="ite" :dark="dark" :xAxisDataFormat="false" :markLineData="ite.markLineData" :max="ite?.max" />
            </div>
          </div>
        </px-carousel-item>
      </px-carousel>
      <div v-else class="statis-default" :style="{ backgroundColor: dark ? 'transparent' : '#fff' }">
        <px-empty class="px-empty-common" :dark="dark" />
      </div>
    </div>
  </modelBox>
</template>

<style lang="scss" scoped>
.toggle {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-around;

  .px-button {
    font-size: 18px;
  }

  .carousel-index {
    font-size: 13px;
    line-height: 1;
    color: #333;
  }

  .carousel-index-dark {
    color: #ddd;
  }
}

.gas-board-bulkGas-statis {
  width: 100%;
  height: 100%;

  .statis-carousel-item {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    align-items: center;
    width: 100%;
    height: 100%;

    .statis-carousel-item-item {
      height: 100%;
    }
  }

  .statis-default {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 4px;
  }
}
</style>
